import { Meta, Preview, Story, Props } from '@storybook/addon-docs/blocks';
import { DocgenButton } from '../../components/DocgenButton';
import { ButtonGroup, SubGroup } from '../../components/ButtonGroup';
import { ForwardRefButton } from '../../components/ForwardRefButton';
import { MemoButton } from '../../components/MemoButton';

<Meta title="Addons/Docs/props" component={ButtonGroup} />

export const FooBar = ({ foo, bar, baz } = {}) => (
  <table>
    <tr>
      <td>Foo</td>
      <td>{foo && foo.toString()}</td>
    </tr>
    <tr>
      <td>Bar</td>
      <td>{bar}</td>
    </tr>
    <tr>
      <td>Baz</td>
      <td>{baz && baz.toString()}</td>
    </tr>
  </table>
);

## ArgTypes

<Preview>
  <Story
    name="ArgTypes"
    args={{
      foo: false,
      bar: '',
      baz: ['a', 'b'],
    }}
    argTypes={{
      foo: { name: 'foo', type: { name: 'boolean' }, description: 'foo description' },
      bar: { name: 'bar', type: { name: 'string' }, description: 'bar description' },
      baz: {
        name: 'baz',
        type: { name: 'array', value: { name: 'string' } },
        description: 'baz description',
      },
    }}
  >
    {(args) => <FooBar {...args} />}
  </Story>
</Preview>

<Props story="ArgTypes" />

## ArgTypes w/ Components

<Props story="ArgTypes" showComponents />

## Args

<Preview>
  <Story
    name="Args"
    args={{
      foo: false,
      bar: '',
    }}
  >
    {(args) => <FooBar {...args} />}
  </Story>
</Preview>

<Props story="Args" />

## Component Story

<Preview>
  <Story name="Component" argTypes={{ background: { control: { type: 'color' } } }}>
    {({ background, children }) => {
      const contents = children && children.length > 0 ? children : <DocgenButton label="child" />;
      return <ButtonGroup background={background}>{contents}</ButtonGroup>;
    }}
  </Story>
</Preview>

<Props story="Component" />

## Controls Story

<Preview>
  <Story
    name="Controls"
    argTypes={{
      foo: { control: { type: 'range' } },
      bar: { control: { type: 'options', options: ['a', 'b', 'c'] } },
    }}
  >
    {(args) => <FooBar {...args} />}
  </Story>
</Preview>

<Props story="Controls" />

## Components

<Props components={{ ButtonGroup, SubGroup }} />

## Component

<Props of={DocgenButton} />
